最全的javascript类型转换规则精简总结

JavaScript这门语言饱受诟病的点之一就是类型转换, 有时候js的类型转换机制确实会让新手摸不着头脑. 其实我自己经过大量测试和查找经典资料, 总结学习过js的类型转换机制以后,觉得类型转换并没有大家想得那么难以理解, 反倒觉得很清晰. 刚好年末了, 总结分享一下自己的知识笔记.

本篇文章内容不多, 而且知识点总结全面, 耐心看下去, 然后动手测试总结. 不管你是刚入门js或者是看过一遍js但是没有形成知识体系的同学, 这篇文章都能帮助到你.

谈到类型转换, 那么我们先简要列一下js的数据类型: 七大原始值类型为string, number, boolean, undefined, null, symbol, bigInt和引用值类型object.

另外, 我们需要时刻注意, js的类型转换只有三种类型的转换:

即原始数据类型{string, number, boolean, undefined, null} + 引用数据类型{object, ... } —to→ {string, boolean, number}的类型转换.

而在这三种类型转换当中, 分为两大块: 显式类型转换和隐式类型转换. 其中, 显式类型转换是隐式类型转换的基础, 隐式类型转换就是在某些场景下隐式地按照显式类型转换的规则类型转换, 所以着重掌握显式类型转换的机制, 然后再记住哪些场景会触发隐式类型转换即可.

这里要讨论的显式类型转换机制指的是: 通过函数 String(), Number(), Boolean() 进行类型转换的机制:

我们可以将不同类型的值 作为函数String() | Number() | Boolean() 的参数, 然后观察输出的值的类型来自己总结显式类型转换的规则.

对于显式类型转换的机制, 相信大家都很清楚了, 这里就直接列举一下. 不过对象到{string, number, boolean} 的类型转换机制很多人可能会学的混乱, 所以会单独列一小节详细解释一遍.

原始数据类型通过String() 进行to string的类型转换规则表:

Note: number和boolean都为原始数据类型, 没有toString()方法, 但是仍然可以以点语法的形式调用toString(), javascript会自动将.toString()解析为String(), 进行显式类型转换

原始数据类型 通过Number() 进行to number的类型转换规则表:

原始数据类型 通过Boolean() 进行to number的类型转换规则:

在第1 章有说过, js的类型转换只有其他类型到{string, number, boolean}的类型转换, 其中对象到{string, number, boolean}的类型转换称作为to primitive类型转换, 即对象转原始数据类型.

在ES5版本, 当我们显式或者隐式地将对象转换为原始值(primitive value)的时候, 通常是默认调用对象自身或者原型链上的toString() 或者valueOf() 方法, 将其转换原始值. 或者可以自定义覆盖对象的这两个方法来控制对象的to primitive行为, 不过不建议这样做.

ES6 为开发者提供了官方的[Symbol.toPrimitve] 接口来自定义对象的to primitive操作, 当对象发生显式或者隐式类型转换操作的时候, 会自动调用其预先定义的[Symbol.toPrimitive] 方法, 同时会忽略对象自身的toString()和valueOf()方法.

在下面的内容, 将重点讨论ES6版本中, 对象发生类型转换时的方法调用逻辑. 主要划分为一下几块内容进行分析:

关于对象转为布尔值的机制很简单, 一般情况下, 对象to boolean都是直接转换为true, 而且不会调用对象的[Symbol.toPrimitive], toString, valueOf 这三个方法.

不过需要注意的是, 在4.2.3 节中提到, document.all对象在现代浏览器中转为布尔值的时候为true，而在老版本的IE浏览器中为false. 这是一种极特殊情况，在vscode中使用这个对象的时候，会提示已经被弃用了，所以不用在意.

这小节的内容很重要, 也是初学者比较混乱的点, 因为对于对象发生类型转换时, [Symbol.toPrimitive], toString, valueOf 这三个方法是否调用和调用的顺序的知识不太了解.

在ES5的时候, 对象的类型转换是通过内置或者自定义的toString, valueOf 方法进行to primitive类型转换的.

比如下面的代码中, 是对象 to string的类型转换.

对象 to string的类型转换的步骤为:

对象 to string是先调用toString(), 并在返回值为对象的时候, 再调用valueOf(). 而对象 to number的时候, 调用的顺序相反, 不过其他逻辑基本相同.

对象 to number的类型转换的步骤为:

在es5的时候, 对象到原始值的转换结果依赖其toString()和valueOf()方法, 这两个方法可以自定义,也可以是原型方法. 一些JavaScript的内置对象会有自己的内置toString()和valueOf()方法, 位于其原型上, 汇总如下:

在ES6, 开发者可以通过官方提供的[Symbol.toPrimitive]接口去定义对象 to primitive 的行为. 需要注意的是, 如果自定义了对象的[Symbol.toPrimitive]的方法, 那么, 当对象发生 to primitive类型转换的时候, 那么只会调用[Symbol.toPrimitive]方法, 而无视ES5中提供的toString(), valueOf()方法.

比如下面将对象显式转换为string的代码中, 只有[Symbol.toPrimitive]()会被调用: 如果返回结果为对象, 则直接报错(不会去调用toString或者是valueOf); 如果返回结果为原始值, 则将将该原始值进行to string操作, 作为最终的对象 to primitive结果.

上述代码中, 对象obj to primitive(string)的执行示意图如下:

当我们从第 2 章了解到js每种类型是如何进行显式类型转换的以后, 对于隐式类型转换, 只需要知道在哪些情况下会触发类型转换, 因为类型转换的规则是和显式类型转换是相同的(经过测试, 对象的隐式类型转换稍微有一些区别)

隐式类型类型转换大多发生在操作符当中, 比如宽松相等操作符==两端的类型不同的时候, 会发生隐式类型转换. 而有时候, 某些函数的参数如果是对象, 也会触发对象的类型转换, 比如isNaN()输入的参数为对象的时候, 会触发对象 to primitive(number)的类型转换.

由于我关于函数触发隐式类型转换的测试不多, 所以暂不讨论.

对于某些运算符, 当A B的时候, 如果A和B类型不一致, 那么将会触发隐式类型转换, 这些运算符汇总如下:

✅ 发生隐式类型转换的情形, 以及类型转换规则:

注意, 在隐式类型转换当中, 如果对象发生to primitive操作

两等运算==隐式类型转换示例

❓示例: [] == ![]的结果是什么?

💡解答: 结果为true

关系运算A B的隐式类型转换和转换规则:

逻辑运算符和条件表达式的隐式类型转换规则最为简单, 实际上就是将不是boolean类型的值, 按照 2.3 和 2.4.1 节的to boolean类型转换规则进行转换, 然后进一步进行条件判定.

加性运算符算是隐式类型转换当中最常考察的点了, 原因在于它其中糅合了很多类型转换的规则.

加性运算A+B在以下情景当中会发生隐式类型转换:

值得一提的是, 在加性运算符 +的隐式类型转换当中, 类型转换的顺序是从左到右进行的, 先进行类型转换然后再相加. 比如, undefined + null + "1"的类型转换顺序为:

加性操作符隐式类型转换示例

❓示例: 下面的代码中, result的值为?

解答: "NaNTencentnull9false"

算数运算符和一元运算符的类型转换规则很简单, 也就是将非number类型的值转换为number类型, 类型转换规则参照 2.2节

如果这篇文章 对你的学习 有所 帮助，欢迎 点赞 👍 收藏 ⭐ 留言 📝 ，你的支持 是我 创作分享 的 动力！

学习过程中如果有疑问，可以私信与我交流~

参考资料